<template>
  <div class="order">
    <div class="header-row">
      <el-row>
        <el-col
          :span="5"
          style="margin-bottom: 10px"
        >
          <span>手机号码：</span>
          <el-input
            v-model="searchForm.phone"
            placeholder="请输入手机号"
            style="width: calc(100% - 84px)"
          />
        </el-col>
        <el-col
          :span="5"
          style="margin-bottom: 10px"
        >
          <span>用户名称：</span>
          <el-input
            v-model="searchForm.username"
            placeholder="请输入用户名称"
            style="width: calc(100% - 84px)"
          />
        </el-col>
        <el-col
          :span="4"
          style="margin-bottom: 10px"
        >
          <span>回收人员：</span>
          <el-input
            v-model="searchForm.recycleName"
            placeholder="请输入回收人员"
            style="width: calc(100% - 84px)"
          />
        </el-col>
        <el-col
          :span="4"
          style="margin-bottom: 10px"
        >
          <span>订单状态：</span>
          <el-select
            v-model="searchForm.status"
            placeholder="请选择"
            style="width: calc(100% - 84px)"
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
          <!-- <el-input v-model="searchForm.status" placeholder="请选择" style="width: calc(100% - 84px)"></el-input> -->
        </el-col>
        <el-col
          :span="6"
          style="margin-bottom: 10px"
        >
          <span>回收日期：</span>
          <el-date-picker
            v-model="searchForm.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: calc(100% - 84px)"
          />
        </el-col>
        <el-col
          :span="24"
          style="text-align: right"
        >
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleSearch"
          >查询</el-button>
          <el-button
            icon="el-icon-refresh"
            @click="handleReset"
          >重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table-row">
      <el-table
        :data="orderList"
        v-loading="loading"
        style="width: 100%"
        border
      >
        <el-table-column
          align="center"
          prop="recycleUserName"
          label="回收人员"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="userName"
          label="用户"
        ></el-table-column>
        <el-table-column
          align="center"
          label="创建时间"
          width="160"
        >
          <template slot-scope="scope">
            {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="完成时间"
          width="160"
        >
          <template slot-scope="scope">
            {{ dayjs(scope.row.overTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="订单状态"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1">进行中</el-tag>
            <el-tag
              v-else-if="scope.row.status === 2"
              type="success"
            >已完成</el-tag>
            <el-tag
              v-else-if="scope.row.status === 3"
              type="danger"
            >已取消</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="recycleUserPhone"
          label="回收人电话"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="userPhone"
          label="用户电话"
        ></el-table-column>
        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
                v-if="scope.row.status === 1"
              style="margin-right: 10px"
              type="text"
              @click="handleCancel(scope.row)"
            >取消</el-button>
            <el-popconfirm
              v-if="scope.row.status === 3"
              icon="el-icon-info"
              iconColor="red"
              title="确定删除当前订单吗？"
              @Confirm="handleDelete(scope.row)"
            >
              <el-button
                type="text"
                slot="reference"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper, sizes"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { queryOrderList, deleteOrder, cancelOrder } from '@/api'

export default {
  data() {
    return {
      statusList: [
        { value: 1, label: '进行中' },
        { value: 2, label: '已完成' },
        { value: 3, label: '已取消' }
      ],
      orderList: [],
      loading: false,
      searchForm: {
        phone: undefined,
        username: undefined,
        recycle: undefined,
        date: [undefined, undefined]
      },
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    dayjs,
    // 获取列表数据
    getListData() {
      const params = {
        phone: this.searchForm.phone,
        username: this.searchForm.username,
        recycleUserName: this.searchForm.recycle,
        orderTime: this.searchForm.date[0],
        overTime: this.searchForm.date[1],
        size: this.pagination.pageSize,
        page: this.pagination.current
      }
      this.loading = true
      queryOrderList(params)
        .then(res => {
          this.loading = false
          if (res.status === 200) {
            this.loading = false
            this.orderList = res.data.list
            this.pagination.total = res.data.total
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 搜索
    handleSearch() {
      this.getListData()
    },
    // 重置
    handleReset() {
      this.searchForm.phone = undefined
      this.searchForm.username = undefined
      this.searchForm.recycle = undefined
      this.searchForm.date = [undefined, undefined]
      this.pagination.current = 1
      this.pagination.pageSize = 10
      this.pagination.total = 0
      this.getListData()
    },
    // 改变页面数量
    handleSizeChange(pageSize) {
      this.pagination.current = 1
      this.pagination.pageSize = pageSize
      this.getListData()
    },
    // 切换分页
    handleCurrentChange(current) {
      this.pagination.current = current
      this.getListData()
    },
    // 删除订单
    handleDelete(row) {
      deleteOrder({ id: row.id }).then(res => {
        if (res.status === 200) {
          this.$message.success('删除成功')
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        this.$message.error('删除失败')
      })
    },
    // 取消订单
    handleCancel(row) {
      cancelOrder({ id: row.id }).then(res => {
        if (res.status === 200) {
          this.$message.success('订单已取消')
          this.getListData()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order {
  .header-row {
    padding-bottom: 30px;
  }
  .pagination {
    padding-top: 10px;
    text-align: right;
  }
}
</style>
